import React, { memo, useEffect, useRef, ElementRef, useState } from 'react';
import type { ReactNode, FC } from 'react';
import { useAppSelector } from '@/store';
import { shallowEqual } from 'react-redux';
import { BannerControl, BannerLeft, BannerWrapper, BannerRight } from './style';
import { Carousel, GetRef } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';

interface IProps {
    children?: ReactNode;
}
export interface IBanner {
    imageUrl: string;
    targetId: number;
    adid: any;
    targetType: number;
    titleColor: string;
    typeTitle: string;
    url: string;
    exclusive: boolean;
    monitorImpress: any;
    monitorClick: any;
    monitorType: any;
    monitorImpressList: any;
    monitorClickList: any;
    monitorBlackList: any;
    extMonitor: any;
    extMonitorInfo: any;
    adSource: any;
    adLocation: any;
    adDispatchJson: any;
    encodeId: string;
    program: any;
    event: any;
    video: any;
    song: any;
    scm: string;
    bannerBizType: string;
}
const Swiper: FC<IProps> = () => {
    //组件实例
    const lunboRef = useRef<GetRef<typeof Carousel>>(null);
    // const lunboRef = useRef<ElementRef<typeof Carousel>>(null);
    useEffect(() => {}, []);
    const banner: IBanner[] = useAppSelector(
        (state) => state.recommendStore.banners,
        shallowEqual,
    );

    //点击按钮
    const controlClick = (type: number) => {
        // 向左
        if (type == 1) {
            lunboRef.current?.prev();
        } else {
            lunboRef.current?.next();
        }
    };
    //获取当前图片
    const [bgcImg, setBgcImg] = useState('');
    const handleBeforeChange = (current: number, next: number) => {
        let imgBlurUrl = banner[next]?.imageUrl + '?imageView&blur=40x20';
        setBgcImg(imgBlurUrl);
    };

    return (
        <div>
            <BannerWrapper
                style={{
                    background: `url(${bgcImg}) center center`,
                }}
            >
                <div className="banner warp-v2">
                    <BannerLeft>
                        <Carousel
                            beforeChange={handleBeforeChange}
                            autoplay
                            ref={lunboRef}
                            effect="fade"
                        >
                            {banner.map((item, index) => {
                                return (
                                    <div key={item.imageUrl}>
                                        <img
                                            className="tupian"
                                            src={item.imageUrl}
                                            alt={item.typeTitle}
                                        />
                                    </div>
                                );
                            })}
                        </Carousel>
                    </BannerLeft>
                    <BannerRight></BannerRight>
                    <BannerControl>
                        <div className="zuo" onClick={() => controlClick(1)}>
                            <LeftOutlined style={{ fontSize: '30px' }} />
                        </div>
                        <div className="you" onClick={() => controlClick(2)}>
                            <RightOutlined style={{ fontSize: '30px' }} />
                        </div>
                    </BannerControl>
                </div>
            </BannerWrapper>
            {banner.map((item, index) => {
                return <li key={item.imageUrl}>{item.imageUrl}</li>;
            })}
        </div>
    );
};

export default memo(Swiper);
